
<template>
    <a-drawer class="container_edit" :visible="visible" :title="props.title" :width="520" @close="onClose">
        <a-spin :spinning="loading">
            <a-form
                ref="refForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
            </a-form>
            <a-divider />
            <div>
                <a-button type="primary" @click="handleConfirm">确定</a-button>
                <a-button style="margin-left: 16px" @click="handleClose">取消</a-button>
                <a-button style="margin-left: 16px" @click="handleReset">重置</a-button>
            </div>
        </a-spin>
    </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { ObjectUtil } from '@/util';
import { Bus } from '@/plugin';
// Component
// Api
import Api from '@/axios/api/org';
// Model
import { Result } from "@/model/common";
import { OrgForm, OrgDTO } from '@/model/org';

// 参数
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '编辑单位管理',
    },
});

// 变量
const visible = ref(false);
const loading = ref(false);
const labelCol = { span: 4 };
const wrapperCol = { span: 18 };
const refForm = ref();
const form = ref(new OrgForm());
const rules = OrgForm.rules;

// 新增标识，为false时表示更改下
const insertFlag = ref(true);
// 数据变化标识，为true时需要发送更新列表的消息
const dataChangedFlag = ref(false);

// 方法

/**
 * 打开编辑页面
 */
const open = (id: string | undefined) => {
    if (id) {
        loadInfo(id);
        insertFlag.value = false;
    } else {
        insertFlag.value = true;
    }
    visible.value = true;
}

/**
 * 关闭编辑页面
 */
const close = () => {
    visible.value = false;
}

/**
 * 页面关闭时的回调
 */
const onClose = () => {
    if (!insertFlag.value) {
        handleReset();
    }
    if (dataChangedFlag.value) {
        Bus.emit('refresh_org');
    }
    dataChangedFlag.value = false;
}

/**
 * 点击确认按钮事件
 */
const handleConfirm = () => {
    refForm.value.validate()
        .then(() => {
            insertFlag.value ? insert() : update();
        })
}

/**
 * 点击取消按钮事件
 */
const handleClose = () => {
    close();
}

/**
 * 点击重置按钮事件
 */
const handleReset = () => {
    refForm.value.resetFields();
}

/**
 * 新增
 */
const insert = () => {
    loading.value = true;
    Api.insert(form.value)
        .then(() => {
            dataChangedFlag.value = true;
            message.success('新增成功！');
            handleReset();
        })
        .catch((err: Result) => {
            message.error(`新增失败！${err.msg}`);
        })
        .finally(() => {
            loading.value = false;
        });
}

/**
 * 修改
 */
const update = () => {
    loading.value = true;
    Api.update(form.value)
        .then(() => {
            dataChangedFlag.value = true;
            message.success('修改成功！');
            handleClose();
        })
        .catch((err: Result) => {
            message.error(`修改失败！${err.msg}`);
        })
        .finally(() => {
            loading.value = false;
        });
}

/**
 * 获取信息
 */
const loadInfo = (id: string) => {
    loading.value = true;
    Api.info(id)
        .then((res: Result) => {
            ObjectUtil.copy(res.data, form.value);
        })
        .finally(() => {
            loading.value = false;
        });
}

// 定义组件对外暴露的内容
defineExpose({
    open
})
</script>

<style lang="less" scoped>
</style>
